<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item> <i class="el-icon-lx-calendar"></i> 表单 </el-breadcrumb-item>
        <el-breadcrumb-item>发起投票</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="form-box">
        <el-form ref="form" :model="form" label-width="80px">
          <el-form-item label="标题">
            <el-input v-model="form.title"></el-input>
          </el-form-item>

          <el-form-item label="投票说明">
            <el-input type="textarea" rows="5" v-model="form.content"></el-input>
          </el-form-item>

          <el-form-item label="投票类型:">
            <div>
              <el-radio v-model="form.radio" label="0" border size="medium">单选</el-radio>
              <el-radio v-model="form.radio" label="1" border size="medium">多选</el-radio>
            </div>
          </el-form-item>

          <el-form-item label="截止时间">
            <!-- <el-col :span="11">
              <el-date-picker type="date" placeholder="选择日期" v-model="form.day" style="width: 100%;"></el-date-picker>
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
              <el-time-picker placeholder="选择时间" v-model="form.time" style="width: 100%;"></el-time-picker>
            </el-col> -->
            <div class="block">
              <span class="demonstration"></span>
              <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>

          <!-- <el-form-item label="发起人">
            <el-input v-model="form.senderId"></el-input>
          </el-form-item> -->

          <el-form-item label="设置选项">
            <el-form-item v-for="(domain, index) in dynamicValidateForm.domains" :label="'选项' + (index + 1)"
              :key="domain.key" :prop="'domains.' + index + '.value'" :rules="{
                required: true, message: '选项不能为空', trigger: 'blur'
              }">
              <el-form-item el-form :inline="true">
                <el-input v-model="domain.value"></el-input>
                <el-button @click.prevent="removeDomain(domain)">删除</el-button>
              </el-form-item>
            </el-form-item>
            <el-form-item>
              <el-button @click="addDomain">新增选项</el-button>
            </el-form-item>
          </el-form-item>
          <!-- </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="onSubmit">发起投票</el-button>
            <el-button @click="cancleAdd">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default ({
  data() {
    return {
      token: '',
      dynamicValidateForm: {
        domains: [{
          value: ''
        }]
      },
      currLoginId: 0,
      klassId: 0,
      hasEmpty: false,
      form: {
        // 投票类型
        radio: '',
        // 标题
        title: '',
        // 通知内容
        content: '',
        // 截止日期
        endTime: '',
        // 投票发起人
        senderId: '',
        //选项
        voteOption: {
        }
      }
    };
  },
  methods: {
    onSubmit() {
      let texts = [];
      this.hasEmpty = false;
      for (let i = 0; i < this.dynamicValidateForm.domains.length; i++) {
        texts.push(this.dynamicValidateForm.domains[i].value);
        if (this.dynamicValidateForm.domains[i].value == null || this.dynamicValidateForm.domains[i].value == "") {
          this.hasEmpty = true;
        }
      }
      if (this.form.title == null || this.form.title == '') {
        this.$message({
          type: 'error',
          message: '标题不能为空'
        });
      } else if (this.form.content == null || this.form.content == '') {
        this.$message({
          type: 'error',
          message: '说明不能为空'
        })
      } else if (this.form.radio == null || this.form.radio == '') {
        this.$message({
          type: 'error',
          message: '类型不能为空'
        })
      } else if (this.form.endTime == null || this.form.endTime == '') {
        this.$message({
          type: 'error',
          message: '截止时间不能为空'
        })
      } else if (texts.length < 2) {
        this.$message({
          type: 'error',
          message: '至少要有两条选项'
        })
      } else if (this.hasEmpty) {
        this.$message({
          type: 'error',
          message: '不能有选项为空'
        })
      } else {
        this.$axios.post('/vote/admin/addVote', {
          vote: {
            title: this.form.title,
            content: this.form.content,
            radio: this.form.radio,
            endTime: this.form.endTime,
            votedNum: 0,
            senderId: this.currLoginId,
            klassId: this.klassId
          },
          text: texts
        }).then((r) => {
          this.$message.success('提交成功！');
          this.$router.push({path:"/voteList"})
        });
      }
    },
    cancleAdd(){
      this.$router.push({path:"/voteList"})
    },
    removeDomain(item) {
      var index = this.dynamicValidateForm.domains.indexOf(item)
      if (index !== -1) {
        this.dynamicValidateForm.domains.splice(index, 1)
      }
    },
    addDomain() {
      this.dynamicValidateForm.domains.push({
        value: '',
        key: Date.now()
      });
    }
  },
  created() {
    this.token = {
      token: localStorage.getItem('token')
    };
    this.$axios.get('/auth/admin/getMe').then((r) => {
      if (r.data.code == 200) {
        this.currLoginId = r.data.data.id;
        this.$axios.get('/manage/admin/klass/getKlassByMasterId/' + r.data.data.id).then((r) => {
          if (r.data.code == 200) {
            this.klassId = r.data.data.id;
          }
        });
      }
    });
  }
});

</script>
<style>

</style>